<template>
	<div class="content-box">
		<!--工具条-->
		<div v-show="Sholist">
			<el-col class="toolbar">
				<el-col :span="12">
					<h2>预算管理-年度预算</h2>
				</el-col>
				<el-col :span="24" style="text-align:right;">
					<el-form :inline="true" >
						<el-form-item>
							<el-button type="info" class="el-icon-plus" @click="xinzeng()" > 新增</el-button>
						</el-form-item>
						<el-form-item>
							<el-button type="info" class="el-icon-edit" @click="xiugai" :disabled="sunbLis" > 修改</el-button>
						</el-form-item>
						<el-form-item>
							<el-button type="danger" class="el-icon-close" @click="Fu_Delete" :disabled="sunbLis" > 删除</el-button>
						</el-form-item>
						<el-form-item>
							<el-button type="success" class="el-icon-check" @click="Fu_Operation" :disabled="sunbLis" > 提交</el-button>
						</el-form-item>
						<el-form-item>
							<el-button type="danger" class="el-icon-arrow-left" @click="Fu_OperationA" :disabled="Review" > 撤销</el-button>
						</el-form-item>
						<el-form-item>
							<el-button type="info" class="el-icon-upload2" > 导出数据</el-button>
						</el-form-item>
						<el-form-item>
							<el-button type="info" class="el-icon-document" @click="Fu_YearBudgetLine" > 预算明细</el-button>
						</el-form-item>
					</el-form>
				</el-col>
			</el-col>
			<!--列表-->
			<el-table ref="singleTable" :data="tableData" max-height="700" @row-dblclick="dblclick()" highlight-current-row border style="width: 100%;" @current-change="handleCurrentChange">
				<el-table-column type="index" width="60">
				</el-table-column>
				<el-table-column prop="YB_DocNO" label="编号" sortable>
				</el-table-column>
				<el-table-column prop="DocDateStr" label="单据日期" sortable>
				</el-table-column>
				<el-table-column prop="DocStatusStr" label="单据状态" sortable>
				</el-table-column>
				<el-table-column prop="YB_Year" label="年份" sortable>
				</el-table-column>
				<el-table-column prop="YB_Title" label="摘要" sortable>
				</el-table-column>
				<el-table-column prop="CreateByStr" label="创建人" sortable>
				</el-table-column>
				<el-table-column prop="CreateDateStr" label="创建日期" sortable>
				</el-table-column>
			</el-table>
		</div>
		<!-- 新增页面 -->
        <el-dialog title="新增" :visible.sync="dialogFormVisibleA" size="tiny" :modal-append-to-body="false">
		  	<div>	  								
		  		<div class="block">
				  <span class="demonstration">年份：</span>
				  <el-date-picker
				    v-model="value1"
				    align="right"
				    type="year"
				    placeholder="选择年"
				    @change="changeY">
				  </el-date-picker>
				</div>   
	           	</br>
			  	<span>预算树名称：</span>
	                <template>
					  <el-input v-model="value2" placeholder="请输入预算树"></el-input>
					</template>
				</br>
				<el-checkbox-group v-model="AssistItem">
				    <div v-for='item in Assisting'>
				        <el-checkbox :label="item.Name" :value="item.Code" :key="item.Code" ></el-checkbox>
				    </div>
				</el-checkbox-group>
		  	</div>
		  
		  	<div slot="footer" class="dialog-footer">
			    <el-button @click="dialogFormVisibleA = false">取 消</el-button>
			    <el-button type="primary" @click="ProfitQuedingA()">确 定</el-button>
		  	</div>
		</el-dialog>
		<!-- 修改页面 -->
        <el-dialog title="修改" :visible.sync="dialogFormVisibleB" size="tiny" :modal-append-to-body="false">
		  	<div>	  								
		  		<div class="block">
				  <span class="demonstration">年份：</span>
				  <el-date-picker
				    v-model="value1"
				    align="right"
				    type="year"
				    placeholder="选择年"
				    @change="changeY">
				  </el-date-picker>
				</div>   
	           	</br>
			  	<span>预算树名称：</span>
	                <template>
					  <el-input v-model="value2" placeholder="请输入预算树"></el-input>
					</template>
				</br>
				<el-checkbox-group v-model="AssistItem">
				    <div v-for='item in Assisting'>
				        <el-checkbox :label="item.Name" :value="item.Code" :key="item.Code" ></el-checkbox>
				    </div>
				</el-checkbox-group>
		  	</div>
		  
		  	<div slot="footer" class="dialog-footer">
			    <el-button @click="dialogFormVisibleB = false">取 消</el-button>
			    <el-button type="primary" @click="ProfitQuedingB()">确 定</el-button>
		  	</div>
		</el-dialog>
		<!-- 查看页面 -->
        <el-dialog title="查看" :visible.sync="dialogFormVisibleC" size="tiny" :modal-append-to-body="false">
		  	<div>	  								
		  		<div class="block">
				  <span class="demonstration">年份：</span>
				  <el-date-picker
				    v-model="value1"
				    align="right"
				    type="year"
				    placeholder="选择年"
				    @change="changeY" disabled>
				  </el-date-picker>
				</div>   
	           	</br>
			  	<span>预算树名称：</span>
	                <template>
	                	<el-input v-model="value2" placeholder="请输入预算树" disabled></el-input>
					</template>
				</br>
				<el-checkbox-group v-model="AssistItem">
				    <div v-for='item in Assisting'>
				        <el-checkbox :label="item.Name" :value="item.Code" :key="item.Code" disabled></el-checkbox>
				    </div>
				</el-checkbox-group>
		  	</div>
		  
		  	<div slot="footer" class="dialog-footer">
			    <el-button type="primary" @click="dialogFormVisibleC = false">确 定</el-button>
		  	</div>
		</el-dialog>
		<!--预算明细列表-->
		<div v-show="Sholist1">
			<el-col class="toolbar">
				<el-col :span="12">
					<h2>预算明细</h2>
				</el-col>
				<el-col :span="24" style="text-align:right;">
					<el-form :inline="true">
						<!-- 查询项 -->
						<el-form-item>
	                        <label for="file" class="label-file"><i class="icon iconfont icon-daoru"> 导入</i></label>
	                        <input name="file" id="file" type="file" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" @change="update" />
	                    </el-form-item>
						<el-form-item>
							<el-button type="info">
								<i class="icon iconfont icon-daochu3"> 导出</i>
							</el-button>
						</el-form-item>
						<el-form-item>
							<el-button type="info" @click="back" >
								<i class="icon iconfont icon-" > 返回年度预算</i>
							</el-button>
						</el-form-item>
					</el-form>
				</el-col>
			</el-col>
			<el-col class="toolbar">
				<el-col :span="24">
					<span>预算类型：</span>
					<el-select v-model="value5" @change="cxDta" placeholder="请选择">
						<el-option v-for="item in Period_Date" :key="item.ID" :label="item.Period_Name" :value="item.Period_Code">
						</el-option>
					</el-select>
				</el-col>
			</el-col>
			<!--列表-->
			<el-table :data="tableData1" max-height="700"  highlight-current-row border style="width: 100%;" >
				<el-table-column type="index" width="60">
				</el-table-column>
				<el-table-column prop="YBL_BudgetItem" label="预算科目编码" width="160" sortable>
				</el-table-column>
				<el-table-column prop="BudgetItemName" label="预算科目" width="120" sortable >
				</el-table-column>
				<el-table-column prop="Month1" label="1月" sortable>
				</el-table-column>
				<el-table-column prop="Month2" label="2月" sortable>
				</el-table-column>
				<el-table-column prop="Month3" label="3月" sortable>
				</el-table-column>
				<el-table-column prop="Month4" label="4月" sortable>
				</el-table-column>
				<el-table-column prop="Month5" label="5月" sortable>
				</el-table-column>
				<el-table-column prop="Month6" label="6月" sortable>
				</el-table-column>
				<el-table-column prop="Month7" label="7月" sortable>
				</el-table-column>
				<el-table-column prop="Month8" label="8月" sortable>
				</el-table-column>
				<el-table-column prop="Month9" label="9月" sortable>
				</el-table-column>
				<el-table-column prop="Month10" label="10月" sortable>
				</el-table-column>
				<el-table-column prop="Month11" label="11月" sortable>
				</el-table-column>
				<el-table-column prop="Month12" label="12月" sortable>
				</el-table-column>
				<el-table-column prop="TotalPlan" label="合计" sortable>
				</el-table-column>
			</el-table>
		</div>
		<div style="height: 200px;"></div> 	
	</div>
</template>

<script>
	import axios from "../../util/axios";
	export default {
		name: "kongzhi",
		data() {
			return {
				tableData:[],//年度预算列表
				value1:'',//年份
				value2:'',//预算树名称
				value3:'',//年份
				value4:'',//预算树ID
				dialogFormVisibleA:false,//新增窗口
				dialogFormVisibleB:false,//修改窗口
				dialogFormVisibleC:false,//查看窗口
				options: [],//预算树名称集合
				Assisting: [],//辅助核算类型遍历
				AssistItem: [],//辅助核算类型参数
				currentRow: null,
				Sholist: true, //年度预算显隐
				sunbLis: true, //年度预算。修改，删除，提交按钮（只有新建状态可以）
				Review: true, //年度预算。撤销按钮（只有待审核状态可以）
				//预算明细
				tableData1:[],//预算明细列表
				Period_Date: [{
			          Period_Code: '1',
			          Period_Name: '权责'
			        }, {
			          Period_Code: '3',
			          Period_Name: '现金'
			        }
			    ], //类型集合
				Sholist1: false, //预算明细显隐
				Period: 1, //默认类型 1（1.权责 3.现金）
				DocNO:'',
				value5:'',//默认类型
				daoru: true,//导入按钮
			};

		},
		methods: {
			//时间过滤
	    	formatDate(row, column) {
		      	return row.Voucher_DocDate.split("T", 1);
		    },
		    handleCurrentChange(val) {
		        this.currentRow = val;
		        console.log(this.currentRow,"单击选择")
		        console.log(this.currentRow.YB_DocStatus)
		        if(this.currentRow.YB_DocStatus == 1 ){
		        	this.sunbLis = false
		        	this.Review = true
		        }
		        else if(this.currentRow.YB_DocStatus == 2 ){
		        	this.sunbLis = true
		        	this.Review = false
		        }
		        else{
		        	this.sunbLis = true
		        	this.Review = true
		        }
		    },
		    getList() { //主列表
				axios
					.post("Fu_YearBudget")
					.then(res => {
						console.log(res);
						this.tableData = res.rows
					})
					.catch(err => {
						console.log(err);
					});
			},
			DepartList() { //部门
				axios
					.post("Fu_GetDeptList")
					.then(res => {
						this.Assisting = res;
						console.log(this.Assisting)
					})
					.catch(err => {
						console.log(err);
					});
			},
			xinzeng(){//新增
				this.dialogFormVisibleA = true
				this.value1 = ''
				this.value2 = ''
			},
			xiugai(){//修改界面
				this.dialogFormVisibleB = true
				this.value1 = this.currentRow.YB_ModifyDate
				this.changeY(this.currentRow.YB_Year)
				this.value2 = this.currentRow.YB_Title
				console.log(this.currentRow.YB_DocNO)
				axios
					.post("Fu_GetEntityByDocNo",{key:this.currentRow.YB_DocNO})
					.then(res => {
						console.log(res,"年度预算内容内容")
						let fuyu = res.Departments.split(",")
						console.log(fuyu)
						let AssistItemCo = []
						for ( let i = 0 ; i < fuyu.length ; i++){
							for (let l = 0 ; l < this.Assisting.length ; l++){
								if(fuyu[i] == this.Assisting[l].Code ){
									AssistItemCo.push(this.Assisting[l].Name)
								}
							}
						}
						this.AssistItem = AssistItemCo
								
					})
					.catch(err => {
						console.log(err);
					});
				
			},
			dblclick(){//查看
				this.dialogFormVisibleC = true
				this.value1 = this.currentRow.YB_ModifyDate
				this.changeY(this.currentRow.YB_Year)
				this.value2 = this.currentRow.YB_Title
				console.log(this.currentRow.YB_DocNO)
				axios
					.post("Fu_GetEntityByDocNo",{key:this.currentRow.YB_DocNO})
					.then(res => {
						console.log(res,"年度预算内容内容")
						let fuyu = res.Departments.split(",")
						console.log(fuyu)
						let AssistItemCo = []
						for ( let i = 0 ; i < fuyu.length ; i++){
							for (let l = 0 ; l < this.Assisting.length ; l++){
								if(fuyu[i] == this.Assisting[l].Code ){
									AssistItemCo.push(this.Assisting[l].Name)
								}
							}
						}
						this.AssistItem = AssistItemCo
								
					})
					.catch(err => {
						console.log(err);
					});
				
			},
			changeY(val){
				console.log(val)
				this.value3 = val
			},
			ProfitQuedingA(){//增添年度预算
//				console.log(this.value3)
//				console.log(this.value4)
//				console.log(this.AssistItem)
//				console.log(this.AssistItem.length)
//				console.log(this.Assisting)
//				console.log(this.Assisting.length)
				let AssistItemCode = []
				for ( let i = 0 ; i < this.AssistItem.length ; i++){
					for (let l = 0 ; l < this.Assisting.length ; l++){
						if(this.AssistItem[i] == this.Assisting[l].Name ){
							AssistItemCode.push(this.Assisting[l].Code)
						}
					}
				}
//				console.log(AssistItemCode)
				let data = {
					YB_Year:this.value3,
					YB_Title:this.value2,
					deptCodes:AssistItemCode.toString(),
					key:'',
				}
				console.log(data)
				axios
					.post("Fu_SubmitForm",data)
					.then(res => {
						console.log(res)
						this.getList();
						this.dialogFormVisibleA = false
						if(res.Success){
							this.$message({
								message: res.Message,
								type: 'success'
							});
						}else{
							this.$message({
								message: res.Message,
								type: 'warning'
							});
							
						}
					})
					.catch(err => {
						console.log(err);
					});
			},
			ProfitQuedingB(){//修改年度预算
//				console.log(this.currentRow.YB_DocNO)
//				console.log(this.value3)
//				console.log(this.value2)
//				console.log(this.AssistItem)
//				console.log(this.AssistItem.length)
//				console.log(this.Assisting)
//				console.log(this.Assisting.length)
				let AssistItemCode = []
				for ( let i = 0 ; i < this.AssistItem.length ; i++){
					for (let l = 0 ; l < this.Assisting.length ; l++){
						if(this.AssistItem[i] == this.Assisting[l].Name ){
							AssistItemCode.push(this.Assisting[l].Code)
						}
					}
				}
//				console.log(AssistItemCode)
				let data = {
					YB_Year:this.value3,
					YB_Title:this.value2,
					deptCodes:AssistItemCode.toString(),
					key:this.currentRow.YB_DocNO,
				}
				console.log(data)
				axios
					.post("Fu_SubmitForm",data)
					.then(res => {
						console.log(res)
						this.getList();
						this.dialogFormVisibleB = false
						if(res.Success){
							this.$message({
								message: res.Message,
								type: 'success'
							});
						}else{
							this.$message({
								message: res.Message,
								type: 'warning'
							});
							
						}
					})
					.catch(err => {
						console.log(err);
					});
			},
			Fu_Delete(){//删除年度预算
				console.log(this.currentRow.YB_DocNO)
				axios
					.post("Fu_Delete",{key:this.currentRow.YB_DocNO})
					.then(res => {
						console.log(res)
						this.getList();
						if(res.Success){
							this.$message({
								message: res.Message,
								type: 'success'
							});
						}else{
							this.$message({
								message: res.Message,
								type: 'warning'
							});
							
						}
					})
					.catch(err => {
						console.log(err);
					});
			},
			Fu_Operation(){//提交 年度预算
				console.log(this.currentRow.YB_DocNO)
				axios
					.post("Fu_Operation",{
						key:this.currentRow.YB_DocNO,
						Type:1,
					})
					.then(res => {
						console.log(res)
						this.getList();
						if(res.Success){
							this.$message({
								message: res.Message,
								type: 'success'
							});
						}else{
							this.$message({
								message: res.Message,
								type: 'warning'
							});
							
						}
					})
					.catch(err => {
						console.log(err);
					});
			},
			Fu_OperationA(){//撤销年度预算
				console.log(this.currentRow.YB_DocNO)
				axios
					.post("Fu_Operation",{
						key:this.currentRow.YB_DocNO,
						Type:0,
					})
					.then(res => {
						console.log(res)
						this.getList();
						if(res.Success){
							this.$message({
								message: res.Message,
								type: 'success'
							});
						}else{
							this.$message({
								message: res.Message,
								type: 'warning'
							});	
						}
					})
					.catch(err => {
						console.log(err);
					});
			},
			Fu_YearBudgetLine(){//进入预算明细
				this.Sholist1 = true; //预算明细页面显示
				this.Sholist = false; //年度预算页面隐藏
				console.log(this.currentRow.YB_DocNO,"进入预算明细")
				console.log(this.currentRow.YB_DocStatus,"进入预算明细")
				if(this.currentRow.YB_DocStatus == 1 ){
		        	this.daoru = false  	
		        }else{
		        	this.daoru = true
		        }
				this.DocNO = this.currentRow.YB_DocNO
				this.value5 = "权责"
				this.getL()
			},
			getL() { //预算明细列表
				console.log(this.DocNO,"预算明细列表")
				console.log(this.Period,"预算明细列表")
				axios
					.post("Fu_YearBudgetLine",{
						YearBudget:this.DocNO,
						BudgetType:this.Period,//预算类型 1.权责 3.现金.默认1
					})
					.then(res => {
						console.log(res)
						this.tableData1 = res.rows
					})
					.catch(err => {
						console.log(err);
					});
			},
//			预算明细函数
			cxDta() {
				console.log(this.value5+"预算类型ID")
				this.Period = this.value5
				this.getL()
			},
			back(){
				this.Sholist1 = false; //预算明细页面隐藏
				this.Sholist = true; //年度预算页面显示
				this.Period = 1
			},
			update(e) {//导入
	            let file = e.target.files[0];
	            let param = new FormData(); //创建form对象
	            param.append('file', file, file.name);//通过append向form对象添加数据
	            param.append('chunk', '0');//添加form表单中其他数据
	            param.append('key', this.DocNO);//添加form表单
	            console.log(param.get('file')); //FormData私有类对象，访问不到，可以通过get判断值是否传进去
	            let config = {
	                headers: { 'Content-Type': 'multipart/form-data' }
	            };  //添加请求头
	            axios.post('Fu_Import', param, config)
	                .then(response => {
	                	console.log(response)
	                	this.getL()
	                	if(response.Success){
							this.$message({
								message: response.Message,
								type: 'success'
							});
							console.log(this.tableData1,'11111')
						}else{
							this.$message({
								message: response.Message,
								type: 'warning'
							});	
						}
	                })
	        },
			
		},
		created() {

			
		},
		watch: {

		},

		mounted() {
			this.getList(); //列表数据
			this.DepartList();//部门列表
		},
	};
</script>

<style scoped lang="scss">
	@import "../../common/css/index.css";
	.toolbar {
		h2 {
			font-weight: 100;
			margin: 0 auto;
		}
	}
	
	h3 {
		margin: 10px 0;
	}
	
	.EmPennAge {
		h2 {
			font-weight: 100;
			margin: 0 auto;
		}
	}
	
	.HideTable {
		width: 99%;
		margin: 0 auto;
		background-color: #fff;
		border: 1px solid #dfe6ec;
		line-height: 40px;
		font-size: 14px;
		color: #1f2d3d;
	}
	.HideTable th{
		background-color: rgb(245,245,245);
	    text-align: center;
	    overflow: hidden;
	    border-right: 1px solid #ddd;
	    border-bottom: 1px solid #ddd;
	    padding: 0 18px;
	    color: #7e8796;
	    font-weight: normal;
	    width:16.666% !important;
	}
	
	.bianjTable {
		width: 99%;
		margin: 0 auto;
		background-color: #fff;
		border: 1px solid #dfe6ec;
		line-height: 40px;
		font-size: 14px;
		color: #1f2d3d;
	}
	
	th {
		text-align: center;
	}
	
	td {
		text-align: center;
	}
	/* .addItem {
    display: block;
}

.el-form-item {
    margin-bottom: 12px;
}

.el-row {
    margin-bottom: 10px;
} */
	
	.add_btn {
		float: left;
		margin: 10px 0;
	}
	
	.el-dialog--small {
		width: 40%;
	}
	
	.el-dialog__body {
		padding-bottom: 0;
	}
</style>
